<template>
    <view class="grid grid-gap-4 mb-4">
        <view v-for="item in props.list" :key="item.id" @tap="handleClickVipItem(item)"
            :class="[WEBCONFIG?.vip_grid ? 'grid-column-24' : 'grid-column-12']">
            <view class="vip-item px-4 flex flex-x-center flex-column"
                :class="[!!item.icon ? 'vip-item-bg' : 'bg-white rounded-4']"
                :style="'background-image:url(' + item.icon + ');'">
                <view class="font-weight-600 vip-title mb-2">{{ item.title }}</view>
                <view class="item-icon">
                    <uni-icons type="forward" color="var(--vip-title-color)" size="20" class="vip-item-icon"></uni-icons>
                </view>
                <!-- <view v-if="item.unlock" v-else class="h9 font-weight-600 vip-item-price">
                    ￥ {{ item.price }}
                </view> -->
            </view>
        </view>
        <view v-if="WEBCONFIG.game_custom && props.game!=='STICK_CARD'" @tap="handleClickCustom()"
            :class="[WEBCONFIG?.vip_grid ? 'grid-column-24' : 'grid-column-12']">
            <view class="vip-item px-4 flex flex-x-center flex-column"
                :class="[!!WEBCONFIG.game_custom_icon ? 'vip-item-bg' : 'bg-white rounded-4']"
                :style="'background-image:url(' + WEBCONFIG.game_custom_icon + ');'">
                <view class="font-weight-600 vip-title mb-2">自定义</view>
                <view class="item-icon">
                    <uni-icons type="forward" color="var(--vip-title-color)" size="20" class="vip-item-icon"></uni-icons>
                </view>
                <!-- <view v-if="item.unlock" v-else class="h9 font-weight-600 vip-item-price">
                    ￥ {{ item.price }}
                </view> -->
            </view>
        </view>
    </view>
</template>
<script lang="ts" setup>
import { defineProps } from 'vue';
import { useUserStore, useWebConfigStore, useRefs } from '@/stores';
const webConfigStore = useWebConfigStore();
const { WEBCONFIG } = useRefs(webConfigStore);
const userStore = useUserStore();
const { USERINFO } = useRefs(userStore);
const props = withDefaults(defineProps<{
    list: any[],
    game?: string
}>(), {
    list: []
});
const emit = defineEmits(['selected']);
const handleClickVipItem = (item: any) => {
    item.page = 'game';
    emit('selected', item);
}
const handleClickCustom = () => {
    switch (WEBCONFIG.value?.game_custom_role) {
        case 'login':
            if (userStore.hasLogin()) {
                emitCustom();
            } else {
                emit('selected', {
                    unlock: false,
                    game:props.game,
                    id: 'custom'
                });
            }
            break;
        case 'vip':
            if(userStore.hasLogin()&&USERINFO.value?.vip_state){
                emitCustom();
            }else if(userStore.hasLogin()){
                emit('selected', {
                    unlock: false,
                    game:props.game,
                    page:'vipmember',
                    id: 'custom'
                });
            }else{
                emit('selected', {
                    unlock: false,
                    game:props.game,
                    id: 'custom'
                });
            }
            break;
        case 'all':
            emitCustom();
            break;
    }
}
const emitCustom = () => {
    emit('selected', {
        unlock: true,
        game:props.game,
        page: 'custom',
        id: 'custom'
    });
}
</script>
<style lang="scss" scoped>
.grid-column-24 {
    .vip-item {
        .item-icon {
            display: none;
        }

        .vip-title {
            display: none;
        }
    }
}

.grid-column-12 {}

.vip-item {
    height: 80px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center right;

    .vip-item-icon {
        width: 20px;
        height: 20px;
        border: 2px solid var(--xl-border-color);
        border-radius: 9999rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    &.vip-item-bg {
        --vip-title-color: var(--xl-white);

        .vip-title {
            color: var(--xl-white);
        }

        .vip-item-icon {
            border-color: var(--xl-white);
        }

        .vip-item-price {
            color: var(--xl-white);
        }
    }
}
</style>